<template>
    <div class="safe">
        <div v-if="mainShow">
            <van-nav-bar :title="$t('my.safe')" leftArrow @click-left="_return"/>
            <div class="safeMain">
                <van-cell @click="fix(index)" :value="$t('my.fix')" is-link v-for="item,index in safeList" :key="index">
                    <template slot="title">
                        <p>{{item.title}}</p>
                        <span>{{item.desc}}</span>
                    </template>
                </van-cell>
            </div>
        </div>
        <phone v-if="phoneShow" @_return="_returns"></phone>
        <mail v-if="mailShow" @_return="_returns"></mail>
        <login v-if="loginShow" @_return="_returns"></login>
        <pay v-if="payShow" @_return="_returns"></pay>
    </div>
</template>

<script>
    import phone from '@/components/safe/phone'
    import mail from '@/components/safe/mail'
    import login from '@/components/safe/login'
    import pay from '@/components/safe/pay'
    export default {
        data() {
            return {
                safeList:[
                    // {
                    //     title:this.$t('my.phone'),
                    //     desc:this.$t('my.notice_one'),
                    // },
                    // {
                    //     title:this.$t('my.email'),
                    //     desc:this.$t('my.notice_two'),
                    // },
                    {
                        title:this.$t('my.login_password'),
                        desc:this.$t('my.notice_three'),
                    },
                    {
                        title:this.$t('my.pay_password'),
                        desc:this.$t('my.notice_four'),
                    }
                ],
                mainShow:true,
                phoneShow:false,
                mailShow:false,
                loginShow:false,
                payShow:false
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            _returns(){
                if(this.$route.params.mine){
                    this.$router.push(this.$route.params.mine)
                }else{
                    this.phoneShow = this.mailShow = this.loginShow = this.payShow = false
                    this.mainShow = true
                }
            },
            fix(data){
                this.mainShow = this.phoneShow = this.mailShow = this.loginShow = this.payShow = false
                switch (data) {
                    // case 0:
                    //     this.phoneShow = true
                    //     break;
                    // case 1:
                    //     this.mailShow = true
                    //     break;
                    case 0:
                        this.loginShow = true
                        break;
                    case 1:
                        this.payShow = true
                        break;
                }
            },
            getRoute(){
                if(this.$route.params.mine){
                    this.payShow = true
                    this.mainShow = false
                }
            }
        },
        created() {
            this.getRoute()
        },
        mounted() {
            this.$emit('disappear')
        },
        components:{
            phone,
            mail,
            login,
            pay
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,#53d9b5,#2bc299);
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .van-cell:not(:last-child)::after
        border none
    .safeMain
        width 94%
        margin 0 auto
        .van-cell
            background bac !important
            border-radius 5px
            margin-bottom 5px
            color font
            align-items center
            .van-cell__title
                width 85%!important
            .van-cell__title, .van-cell__value
                flex none
                -webkit-flex none
                -webkit-box-flex none
            p
                color #115f49
            span
                font-size 10px
                color #fff
        .van-cell__right-icon
                color #fff
</style>